<template>
    <admin-container :loading="loading">
        <el-table :data="list">
            <el-table-column prop="id" label="UID" width="150px"/>

            <el-table-column prop="username" label="用户名"/>

            <el-table-column prop="nickname" label="昵称"/>

            <el-table-column prop="email" label="邮箱" width="180px"/>

            <el-table-column prop="mobile" label="手机号" width="120px"/>

            <el-table-column prop="money" label="金额"/>

            <el-table-column prop="score" label="积分"/>

            <el-table-column label="操作" align="center" width="200px">
                <template v-slot="{ row }">
                    <k-table-action list="edit,delete"
                                    :data="row"
                                    @command="onClickCommand"/>
                </template>
            </el-table-column>
        </el-table>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import KTableAction from '@/components/table-action.vue';
import { UserModel } from '@/models/user.model';
import { deleteUser, getUserList } from '@/services/users.service';

@Component({
    name: 'UserIndex',
    components: { AdminContainer, KTableAction }
})
export default class UserIndex extends Vue {
    loading: boolean = true;
    list: UserModel[] = [];

    created() {
        console.log('heelo23')
        this.loading = true;
        this.getList()
            .finally(() => {
                this.loading = false;
            })
    }

    async getList() {
        const user = await getUserList();
        this.list = user.data.items;
    }

    /**
     * 命令操作
     * @param evt
     * @param data
     */
    onClickCommand(evt: string, data: UserModel) {
        switch (evt) {
            case 'edit':
                this.$router.push({
                    name: 'UserEdit',
                    params: {
                        id: data.id.toString(),
                    }
                })
                break;
            case 'delete':
                this.$confirm('确定要删除此项吗?')
                    .then(async () => {
                        // 删除
                        try {
                            const res = await deleteUser(data.id);
                            if (res.status === 204) {
                                this.$message.success('删除成功');
                                this.$array.delete(this.list, data.id);
                            }
                        } catch (e) {
                            this.$message.error(e.message);
                        }
                    })
                break;
            default:
                break;
        }
    }
}
</script>
